<template>
  <div id="app">

    <router-view />

    <LoginRegister />

    <div class="nav-bar">
      <router-link to="/" class="nav-item" active-class="active" exact>
        <i class="nav-icon nav-iconfont" :class="$route.path === '/' ? 'icon-home-active' : 'icon-home'"></i>
        <span class="nav-text">首页</span>
      </router-link>

      <router-link to="/found" class="nav-item" active-class="active">
        <i class="nav-icon nav-iconfont"
          :class="$route.path.startsWith('/found') ? 'icon-found-active' : 'icon-found'"></i>
        <span class="nav-text">发现</span>
      </router-link>

      <router-link to="/radio" class="nav-item" active-class="active">
        <i class="nav-icon nav-iconfont" :class="$route.path === '/radio' ? 'icon-radio-active' : 'icon-radio'"></i>
        <span class="nav-text">收音机</span>
      </router-link>

      <router-link to="/my" class="nav-item" active-class="active">
        <i class="nav-icon nav-iconfont" :class="$route.path === '/my' ? 'icon-my-active' : 'icon-my'"></i>
        <span class="nav-text">我的</span>
      </router-link>
    </div>
  </div>
</template>

<style lang="less">
@import url('./assets/reset.css');
@import url('./assets/icon-style.css');
@import url('./assets/recommend-icon/iconfont.css');


html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* 全局隐藏所有滚动条 */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

body {
  user-select: none;
  background-color: #eeeeee9d;
  box-sizing: border-box;
}

#app {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  box-shadow: 0 0 10px #ccc;
  position: relative;
  overflow-x: hidden;
}

.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6vh;
  max-height: 50px;
  border-top: .5px solid #e7e7e7;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: #666;
  font-size: 12px;
}

.nav-item.active {
  font-size: 14px;
  color: #000;
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-text {
  font-size: 8px;
  margin-bottom: 2px;
}

a>i {
  font-size: 12px !important;
}
</style>

<script>
import LoginRegister from './components/LoginRegister.vue';

export default {
  components: {
    LoginRegister
  }
}
</script>

<style scoped>
@import url('./assets/nav-bar-icon/iconfont.css');
</style>
